<template>
  <h2>标题</h2>
  <h3>{{ name }}</h3>
  <h3>{{ age }}</h3>
  <h3>{{ job.type }}</h3>
  <h3>{{ job.salary }}</h3>
  <button @click="changeInfo">修改</button>
</template>

<script>
import { ref } from "vue";
export default {
  name: "App",
  components: {},
  setup() {
    let name = ref("张三");
    let age = ref(18); //基本数据是RefImpl
    // ref.value底层是Proxy
    let job = ref({
      type: "前端",
      salary: "3000",
    });
    function changeInfo() {
      name.value = "李四";
      age.value = 55;
      job.value.type = "后端";
      job.value.salary = 2000;
    }

    return {
      name,
      age,
      job,
      changeInfo,
    };
  },
};
</script>

<style>
</style>
